<template>
	<view class="height-screen">
		<cu-custom bgColor="bg-white" isBack>
			<block slot="content">{{$t('mine.myCoupon')}}</block>
		</cu-custom>
		<view class="bg-white">
			<u-tabs :list="tabList" lineColor="#06C168" :activeStyle="activeStyle" :current="tabCurrent"
				@change="handleChange"></u-tabs>
		</view>
		<view class="margin-ht grid gap padding-bottom-lg" style="margin-top: 20rpx;">
			<view class="bg-white radius-sm flex relative" style="height: 180rpx;" v-for="(item,index) in dataList"
				:key="index" :style="{opacity:item.status==2|| Math.floor(Date.now() / 1000)>item.lose_time?'0.6':'1'}">
				<view class="flex-shrink flex flex-direction align-center justify-center"
					style="width: 190rpx;background-color: rgba(6, 193, 104, 0.1);border-radius: 20rpx 0 0 20rpx;">
					<text class="font-bold text-xl" style="color: #06C168;">$<text
							style="font-size: 60rpx;">{{item.amount}}</text></text>
					<text class="text-xs font-400"
						style="color: #06C168;">{{$t('filed.man')}}${{item.menkan}}{{$t('filed.man')}}</text>
				</view>
				<view class="flex flex-direction justify-center margin-left">
					<text class="one-line text-df font-bold text-black">{{item.name}}</text>
					<text class="one-line text-sm font-400 text-gray margin-tb-xs">{{$t('filed.allKeyong')}}</text>
					<text
						class="one-line text-sm font-400 text-gray">{{$t('filed.guoqiTime')}}：{{item.lose_time | handleDateTime('YYYY-MM-DD')}}</text>
				</view>
				<view class="statu">
					<text>{{item.type==1?$t('filed.newCoupon'):$t('filed.pullNewCoupon')}}</text>
				</view>
				<image :src="lang == 'en' ?'@/static/img/isUse_en.png' : '@/static/img/isUse.png'" class="isUsedImg"
					v-if="item.status==2" />
				<image :src="lang == 'en' ? '@/static/img/gq.png' :'@/static/img/isExpire.png'" class="isUsedImg"
					v-if="Math.floor(Date.now() / 1000)>item.lose_time" />
			</view>
			<section class="empty" v-if="!dataList.length">
				<u-empty mode="list" :text="$t('list.empty')" />
			</section>
		</view>
	</view>
</template>

<script>
	import {
		myCoupon
	} from '@/apis'
	export default {
		data() {
			return {
				tabList: [{
					name: this.$t('filed.all')
				}, {
					name: this.$t('filed.pullNewCoupon')
				}, {
					name: this.$t('filed.newCoupon')
				}, {
					name: this.$t('filed.guoqiCoupon')
				}, {
					name: this.$t('filed.useCoupon')
				}],
				activeStyle: {
					fontWeight: 'bold',
					fontSize: '30rpx',
					color: '#06C168'
				},
				tabCurrent: 0,
				dataList: [],
				page: 1,
				lang: '',
			}
		},
		onShow() {
			this.page = 1
			this.dataList = []
			this.myCoupon()
			this.lang = uni.getStorageSync('lang')
		},
		onReachBottom() {
			this.page++
			this.myCoupon()
		},
		methods: {
			handleChange(event) {
				this.tabCurrent = event.index
				this.page = 1
				this.dataList = []
				this.myCoupon()
			},
			async myCoupon() {
				const res = await myCoupon({
					page: 1,
					status_type: this.tabCurrent + 1
				})
				this.dataList = this.dataList.concat(...res.data)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.statu {
		width: 140rpx;
		position: absolute;
		top: 0;
		right: 0;
		background: rgba(6, 193, 104, 0.1);
		border-radius: 0rpx 20rpx 0rpx 23rpx;
		text-align: center;
		font-size: 24rpx;
		padding: 8rpx 5rpx;
		color: #06C168;
	}

	.isUsedImg {
		position: absolute;
		width: 100rpx;
		height: 87rpx;
		top: 50%;
		right: 40rpx;
		transform: translateY(-50%);
	}
</style>